<template>
    <div>
        <van-nav-bar title="短信验证码登录" style="background: black; color:whitesmoke;" fixed />
        <div style="width: 100%; height: 45px;"></div>
        <div style="width: 100%;height: 800px; background: #ccc;">

            <van-form @submit="onSubmit">
                <van-cell-group inset style="margin-top: 20px;">

                    <van-field v-model="result" is-link readonly name="area" label="地区选择" placeholder="国家和地区"
                        @click="showArea = true" />
                    <van-popup v-model:show="showArea" destroy-on-close position="bottom">
                        <van-area :area-list="areaList" :model-value="pickerValue" @confirm="onConfirm"
                            @cancel="showArea = false" />
                    </van-popup>

                    <van-field v-model="tel" type="tel" label="手机号" />

                    <van-cell-group inset>
                        <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码">
                            <template #button>
                                <van-button size="small" type="primary">发送验证码</van-button>
                            </template>
                        </van-field>
                    </van-cell-group>

                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit" style="background: slateblue; color: aliceblue;">
                        登录
                    </van-button>
                </div>
            </van-form>
               
            <div>
                  <p><span>未登录的手机号验证后将自动登录</span> <span style="color: steelblue;">账号密码登录</span></p>
            </div>
            <div style="width: 100%; height: 400px;"><img src="../images/image.png" alt="" style="width: 100%; height: 400px;"></div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from "vue-router";
const router=useRouter();
const result = ref('');
const showArea = ref(false);
const pickerValue = ref('');
const onConfirm = ({ selectedValues, selectedOptions }) => {
    pickerValue.value = selectedValues.length
        ? selectedValues[selectedValues.length - 1]
        : '';
    showArea.value = false;
    result.value = selectedOptions.map((item) => item.text).join('/');
};
    const onSubmit = (values) => {
          router.push('/home/my')
    };

const tel = ref('');
</script>

<style lang="scss" scoped></style>